<template>
  <div>
    <!-- 面包导航 -->
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>物资流向</el-breadcrumb-item>
      <el-breadcrumb-item>物资发放</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--搜索部分-->
      <el-form size="mini" :inline="true" :model="queryMap" class="demo-form-inline">
        <el-form-item label="发放单号">
          <el-input v-model="queryMap.outNum" placeholder="发放单号"></el-input>
        </el-form-item>
        <el-form-item label="发放类型">
          <el-select v-model="queryMap.type" placeholder="发放类型">
            <el-option label="全部类型" value=""></el-option>
            <el-option label="政府领取" value="0"></el-option>
            <el-option label="医院领取" value="1"></el-option>
            <el-option label="小区领取" value="2"></el-option>
            <el-option label="个人领取" value="3"></el-option>
            <el-option label="其他领取" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="queryMap.status" placeholder="请选择状态">
            <el-option label="已发放" :value="0"></el-option>
            <el-option label="回收站" :value="1"></el-option>
            <el-option label="待审核" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>

        <el-form-item>
          <router-link to="/publish">
            <el-button type="success">
              发放
            </el-button>
          </router-link>
        </el-form-item>
      </el-form>
      <!--            数据表格-->
      <el-table
          size="mini"
          border
          :data="tableData"
          style="width: 100%;height: 450px;">
        <el-table-column label="#" prop="id" width="50"></el-table-column>
        <el-table-column prop="outNum" :show-overflow-tooltip='true' label="发放单号" width="180"></el-table-column>
        <el-table-column prop="type" label="发放类型" width="100">
          <template slot-scope="scope">
            <el-tag effect="plain" size="mini" type="success" v-if="scope.row.type===0">政府领取</el-tag>
            <el-tag effect="plain" size="mini" type="danger" v-else-if="scope.row.type===1">医院领取</el-tag>
            <el-tag effect="plain" size="mini" type="warning" v-else-if="scope.row.type===2">小区领取</el-tag>
            <el-tag effect="plain" size="mini" type="info" v-else-if="scope.row.type===3">个人领取</el-tag>
            <el-tag effect="plain" size="mini" v-else-if="scope.row.type===4">其他领取</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="紧急程度" width="180">
          <template slot-scope="scope">
            <el-rate
                :disabled="true"
                v-model="scope.row.priority"
                show-text
                :texts="['不急','常规','紧急','特急','超急']"
            >
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="发放地点" width="150"></el-table-column>
        <el-table-column prop="productNumber" label="总数" width="80"></el-table-column>
        <el-table-column prop="phone" label="联系方式" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag size="mini" type="danger" effect="plain" v-if="scope.row.status==1">回收</el-tag>
            <el-tag size="mini" effect="plain" v-if="scope.row.status==0">已放</el-tag>
            <el-tag size="mini" effect="plain" type="warning" v-if="scope.row.status==2">审核中</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="operator" label="操作员" width="150"></el-table-column>

        <el-table-column prop="createTime" label="发放时间" width="200px;"></el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button icon="el-icon-view" type="text" size="small" @click="detail(scope.row.id)">
              明细
            </el-button>
            <!--                        给操作员使用的按钮-->
            <span v-if="scope.row.status==0">
                             <el-popconfirm
                                 @confirm="remove(scope.row.id)"
                                 style="margin-left: 20px;"
                                 confirmButtonText='好的'
                                 cancelButtonText='不用了'
                                 icon="el-icon-info"
                                 iconColor="red"
                                 title="这是一段内容确定移入回收站吗？"
                             >
              <el-button type="text" slot="reference" size="mini" icon="el-icon-s-operation">回收站</el-button>
            </el-popconfirm>
                        </span>
            <!--   给操作员使用的按钮(回收站)-->
            <span v-if="scope.row.status==1">
                             <el-popconfirm
                                 @confirm="back(scope.row.id)"
                                 style="margin-left:10px;"
                                 confirmButtonText='好的'
                                 cancelButtonText='不用了'
                                 icon="el-icon-info"
                                 iconColor="green"
                                 title="这是一段内容确定恢复数据吗？"
                             >
                            <el-button type="text" slot="reference" size="mini"
                                       icon="el-icon-s-operation">还原</el-button>
                        </el-popconfirm>
                                <el-popconfirm
                                    style="margin-left:20px;"
                                    @confirm="del(scope.row.id)"
                                    title="这是一段内容确定删除吗？"
                                >
                            <el-button type="text" slot="reference" size="small" icon="el-icon-delete">删除</el-button>
                        </el-popconfirm>
                        </span>

            <!--                        给审核员使用的按钮-->
            <span v-if="scope.row.status===2">
                          <el-popconfirm
                              style="margin-left:20px;"
                              @confirm="publish(scope.row.id)"
                              title="审核通过后库存将更新,是否通过"
                          >
                        <el-button type="text" slot="reference" size="small" icon="el-icon-refresh">通过</el-button>
                    </el-popconfirm>
                        <el-popconfirm
                            style="margin-left:20px;"
                            @confirm="del(scope.row.id)"
                            title="这是一段内容确定删除吗？"
                        >
                            <el-button type="text" slot="reference" size="small" icon="el-icon-delete">删除</el-button>
                        </el-popconfirm>
                        </span>

          </template>
        </el-table-column>
      </el-table>
      <!--                表格分页-->
      <el-pagination
          style="margin-top:20px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNun"
          :page-sizes="[6, 8, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
    <!--发放明细-->
    <el-dialog title="发放明细" :visible.sync="dialogVisible" @close="closeDetail" width="60%">
      <!--                来源信息-->
      <el-card class="box-card" style="margin-bottom: 10px;">
        <div class="text item">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span style="font-size: 11px;color: #303030;">省区市:</span> &nbsp;<el-tag size="mini">
                {{ consumer.address }}
              </el-tag>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span style="font-size: 11px;color: #303030;">具体位置:</span> &nbsp;<el-tag size="mini">
                {{ consumer.name }}
              </el-tag>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span style="font-size: 11px;color: #303030;">联系人 :</span> &nbsp;<el-tag size="mini">
                {{ consumer.contact }}
              </el-tag>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span style="font-size: 11px;color: #303030;">电话 : </span>&nbsp;<el-tag size="mini">
                {{ consumer.phone }}
              </el-tag>
              </div>
            </el-col>

          </el-row>
        </div>
      </el-card>
      <!--                步骤条-->
      <el-steps simple v-if="pStatus==0" style="margin-left: 10px;margin-bottom: 5px;" :space="200" :active="3"
                finish-status="success">
        <el-step title="提交发放单"></el-step>
        <el-step title="审核发放单"></el-step>
        <el-step title="成功发放"></el-step>
      </el-steps>
      <el-steps simple v-if="pStatus==2" style="margin-left: 10px;margin-bottom: 5px;" :space="200" :active="2"
                finish-status="success">
        <el-step title="提交发放单"></el-step>
        <el-step title="审核发放单"></el-step>
        <el-step title="成功发放"></el-step>
      </el-steps>
      <span>

            <el-table height="260" max-height="350" border :data="detailTable" style="width: 100%">
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="pnum" label="商品编号"></el-table-column>
               <el-table-column prop="model" label="规格"></el-table-column>
              <el-table-column
                  prop="imageUrl"
                  label="图片"
                  align="center"
                  width="150px"
                  padding="0px"
              >
                <template slot-scope="scope">
                  <img
                      :src="scope.row.imageUrl"
                      alt
                      style="width: 30px;height:30px"
                  />
                </template>
              </el-table-column>
               <el-table-column prop="count" label="数量"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
            </el-table>

      </span>
      <!--              明细分页-->
      <el-pagination
          style="margin-top:20px;"
          background
          @current-change="handleDetailSizeChange"
          :current-page="detailPage"
          :page-size="3"
          layout="prev, pager, next,total"
          :total="detailTotal">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import {deleteOutStocks, findOutStocks, getDetail, pass, recover, recycle} from "@/network/business/outStocks";

export default {
  name: "OutStock",
  data() {
    return {
      queryMap: {},
      tableData: [],
      loading: false,
      pageNun: 1,
      pageSize: 6,
      total: 0,
      dialogVisible: false,
      detailTable: [],
      consumer: {},
      pStatus: undefined,
      detailTotal: 0,
      detailPage: 1,
      OutStocksId: undefined
    }
  },
  methods: {
    /*弹窗的分页*/
    handleDetailSizeChange(val) {
      console.log(val)
      this.detailPage = val
      this.getDetail()
    },
    /*弹窗关闭*/
    closeDetail() {

    },
    /*设置当前页*/
    handleCurrentChange(val) {
      this.pageNun = val
      this.findOutStocks()
    },
    /*设置每页条数*/
    handleSizeChange(val) {
      this.pageSize = val
      this.findOutStocks()
    },
    /*搜索*/
    search() {
      this.pageNun = 1
      this.findOutStocks()
    },
    /*重置*/
    reset() {
      this.queryMap = {}
      this.pageNun = 1
      this.findOutStocks()
    },
    /*回收站*/
    remove(id) {
      console.log(id)
      recycle(id).then((res) => {
        if (res.success){
          this.$message.success("回收成功")
          this.findOutStocks()
        }else {
          this.$message.error(res.message)
        }
      })
    },
    /*还原*/
    back(id) {
      recover(id).then((res) => {
        console.log(res)
        if (res.success){
          this.$message.success("恢复成功")
          this.findOutStocks()
        }else {
          this.$message.error(res.message)
        }
      })
    },
    /*删除*/
    del(id) {
    deleteOutStocks(id).then((res) => {
      console.log(res)
      if (res.success){
        this.$message.success("删除成功")
        this.findOutStocks()
      }else {
        this.$message.error(res.message)
      }
    })
    },
    /*明细*/
    detail(id) {
      this.OutStocksId = id
      this.getDetail()
    }, getDetail() {
      console.log(this.OutStocksId, this.detailPage)
      getDetail(this.OutStocksId, this.detailPage, 3).then((res) => {
        console.log(res)
        if (res.success) {
          this.consumer = res.data.data.consumerVO
          this.detailTable = res.data.data.itemVOS
          this.pStatus = res.data.data.status
          this.detailTotal = res.data.data.total
          this.dialogVisible = true

        }
      })
    },
    /*是否通过*/
    publish(id) {
    pass(id).then((res) => {
      console.log(res)
      if (res.success){
        this.$message.success("删除成功")
        this.findOutStocks()
      }else {
        this.$message.error(res.message)
      }
    })
    },
    findOutStocks() {
      findOutStocks(this.pageNun, this.pageSize, this.queryMap).then((res) => {
        if (res.success) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },


  },
  created() {
    this.findOutStocks()
  }
}
</script>

<style scoped>

</style>